<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
		<title></title>
		<style type="text/css">
			header,footer {
							margin: 4px;
							padding: 5px;
							min-height: 100px;
							border-radius: 7pt;
							background: gainsboro;
						}
						.main{
							min-height: 500px;
							margin: 0px;
							padding: 0px;
							display: flex;
							flex-flow: row;
						}
						.main>article{
							margin: 4px;
							padding: 5px;
							border-radius: 7pt;
							background: gainsboro;
							flex: 1;
							order: 2;
							}
							.main>nav{
								margin: 4px;
								padding: 5px;
								border-radius: 7pt;
								background: gainsboro;
								flex: 1;
								order: 1;
								}
								.main>aside{
									margin: 4px;
									padding: 5px;
									border-radius: 7pt;
									background: gainsboro;
									flex:1;
									order: 3;
									}
							@media all and (max-width:640px) {
								.main{
									flex-flow: column;
								}
								.main>article,.main>nav,.main>aside{
									order: 0;
								}
								.mian>nav,aside,header,footer{
								    min-height: 50px;
									max-height: 50px;
								}
							}
							header{
								font-size: 50px;
								font-weight: 200;
								color: gray;
								text-align: center;
							}
							.nav-main{
								float: right;
								width: 290px;
								height: 265px;
								background: white;
							}
							.wbk1{
								height: 25px;
								line-height: 40px;
								box-shadow: -1px 0 #808080;
							}
							.tp1{
								height: 20px;
								width: 20px;
								margin-left: 10px;
								margin-top: 5px;
							}
							.mima{
								margin-top: 40px;
								margin-left: 30px;
								height: 40px;
								width: 250px;
								line-height: 30px;
								border: 1px solid darkgray;
							}
							.xgmm{
								height: 50px;
								width: 100%;
								margin-top: 30px;
								border: 0px;
								background: orange;
								font-size: 15px;
								color: white;
							}
							.zx{
								width: 75%;
								margin: auto;
								height: 320px;
								background: white;
							}
							.tp2{
								width: 80%;
								margin-left: 30px;
								height: 270px;
							}
						    .fsgz{
								width: 100%;
								height: 70px;
								font-size: 30px;
								font-weight: 50;
								background: orange;
								color: white;
							}
							.fsgz1{
								width: 47%;
								height: 50px;
								background: orange;
								color: white;
								border: 0;
							}
							.leibiao{
								width: 280px;
								height: 200px;
								background: coral;
							}
							.tp3{
								margin-top: 10px;
								margin-left: 20px;
							}
							.lbnr{
								color: white;
								border-bottom: 1px brown solid;
								height: 50px;
								line-height: 50px;
							}                               
                             .lbnr1{
                             	color: white;
                             	height: 50px;
                             	line-height: 50px;
                             }
				           body{
							  background: gainsboro;
						   }
		</style>
	</head>
	<body>
		<header>个人信息</header>
		<div class="main">
			<article>
				<div class="zx">
				<img src="img/b1.jpg"  class="tp2"/>
				<div class="fsgz">
				<button class="fsgz1">2.5万<br />粉丝</button>|
				<button class="fsgz1">100<br />关注</button>
				</div>
				</div>
				
				</article>
			<nav>
				<div class="nav-main">
					<br />
				<div class="mima">
					<img class="tp1" src="img/profile.png" />
					<input type="text" style="border:0" placeholder=" &nbsp请输入旧密码" class="wbk1"/></div>
				<div class="mima">
					<img class="tp1" src="img/lock.png" />
					<input type="text" style="border:0" placeholder=" &nbsp请输入新密码" class="wbk1"/></div>
					<button class="xgmm">修改密码</button>
				</div>
			</nav>
			<aside>
				<div class="leibiao">
					<div class="lbnr">
						<img src="./img/r2-1.jpg" class="tp3"/>
						&nbsp;&nbsp;&nbsp;&nbsp;个人资料
					</div>
					<div class="lbnr">
						<img src="./img/x2-1.jpg" class="tp3"/>
						&nbsp;&nbsp;&nbsp;&nbsp;消息
					</div>
					<div class="lbnr">
						<img src="./img/t2-1.jpg" class="tp3"/>
						&nbsp;&nbsp;&nbsp;&nbsp;系统
					</div>
					<div class="lbnr1">
						<img src="./img/y2-1.jpg" class="tp3"/>
						&nbsp;&nbsp;&nbsp;&nbsp;退出登录
					</div>
				</div>
			</aside>
		</div>
		<footer></footer>
	</body>
</html>
